﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HintControlDemo.aspx.cs"
    Inherits="Test.HintControlDemo" %>

<%@ Register Assembly="Vincent.Control" Namespace="Vincent.Control" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>测试Hint控件</title>
    <style type="text/css">
        /*css document start*/
        *
        {
            margin: 0;
            padding: 0;
            word-break: break-all;
        }
        *html
        {
            overflow-x: hidden;
        }
        body
        {
            font: 12px/160% Tahoma, Verdana,snas-serif;
            color: #666;
            scrollbar-darkshadow-color: #808080;
            scrollbar-face-color: #DDDDDD;
            scrollbar-highlight-color: #EEEEEE;
            scrollbar-shadow-color: #DEE3E7;
            scrollbar-3dlight-color: #D1D7DC;
            scrollbar-arrow-color: #000000;
            scrollbar-track-color: #EDEDED;
            background-color: #fff;
            margin: 10px 20px;
        }
        /*command*/.messagetext
        {
            overflow: hidden;
            zoom: 1;
            border-left: 1px solid #000;
            border-right: 1px solid #000;
            padding: 0 10px;
            text-align: left;
            background: #ffffe1;
            word-break: break-all;
            letter-break: break-all;
        }
        .messagetext img
        {
            float: left;
            margin: 0 3px 3px 3px;
        }
        .infomessage
        {
            float: right;
            margin-top: -10px;
            margin-right: -4px;
        }
        *html .infomessage
        {
            margin-top: -15px;
        }
        /*command*/</style>

    <script type="text/javascript">

        //显示提示层
        function showhintinfo(obj, objleftoffset, objtopoffset, title, info, objheight, showtype, objtopfirefoxoffset) {

            var p = getposition(obj);

            if ((showtype == null) || (showtype == "")) {
                showtype == "up";
            }
            document.getElementById('hintiframe' + showtype).style.height = objheight + "px";
            document.getElementById('hintinfo' + showtype).innerHTML = info;
            document.getElementById('hintdiv' + showtype).style.display = 'block';

            if (objtopfirefoxoffset != null && objtopfirefoxoffset != 0 && !isie()) {
                document.getElementById('hintdiv' + showtype).style.top = p['y'] + parseInt(objtopfirefoxoffset) + "px";
            }
            else {
                if (objtopoffset == 0) {
                    if (showtype == "up") {
                        document.getElementById('hintdiv' + showtype).style.top = p['y'] - document.getElementById('hintinfo' + showtype).offsetHeight - 40 + "px";
                    }
                    else {
                        document.getElementById('hintdiv' + showtype).style.top = p['y'] + obj.offsetHeight + 5 + "px";
                    }
                }
                else {
                    document.getElementById('hintdiv' + showtype).style.top = p['y'] + objtopoffset + "px";
                }
            }
            document.getElementById('hintdiv' + showtype).style.left = p['x'] + objleftoffset + "px";
        }

        // 定位提示信息出现的位置
        function getposition(obj) {
            var r = new Array();
            r['x'] = obj.offsetLeft;
            r['y'] = obj.offsetTop;
            while (obj = obj.offsetParent) {
                r['x'] += obj.offsetLeft;
                r['y'] += obj.offsetTop;
            }
            return r;
        }

        // 是否为IE浏览器
        function isie() {
            if (navigator.userAgent.toLowerCase().indexOf('msie') != -1) {
                return true;
            }
            else {
                return false;
            }
        }

        //隐藏提示层
        function hidehintinfo() {
            document.getElementById('hintdivup').style.display = 'none';
            document.getElementById('hintdivdown').style.display = 'none';
        }

        function Button1_onclick(obj) {
            showhintinfo(obj, 10, 10, 'aaaaaaaaa', 'bbbbbbbbb', 20, "up", 20);
        }


    </script>

</head>
<body>
    <form id="form1" runat="server">
    <cc1:Hint ID="Hint1" runat="server" HintImageUrl="images" />
    <input id="Button1" type="button" value="显示" onclick="return Button1_onclick(this)" />
    &nbsp;&nbsp;
    <input id="Button2" type="button" value="隐藏" onclick="return hidehintinfo()" />
    </form>
</body>
</html>
